import React, { useContext, useMemo } from 'react'
import Myback from './conponents/Myback'
import Ctx from '../store/Ctx';
import { Arrow, Like, Star } from '@react-vant/icons'
import { Card, Image, Button, Toast, Space } from 'react-vant'

export default function Details(props) {

  //上下文传参 获取数据
  let obj = useContext(Ctx)
  //console.log(obj);

  //console.log(props);
  //通过id去datalist中 找到这个对象
  let id = props.location.state//参数id
  let itemobj = useMemo(() => {
    return obj.datalist.find(item => {
      return item.id == id
    })
  }, [obj.datalist, id])
  //console.log(itemobj);


  return (
    <div>
      {/* 导航栏 */}
      <Myback title={itemobj.title} leftText={true}></Myback>

      {/* 卡片组件 */}
      <Card round style={{ marginBottom: 20 }}>

        <Card.Cover>
          <Image src={itemobj.img} height={'60vh'} />
        </Card.Cover>

        <Card.Header>
          {itemobj.title}
        </Card.Header>

        <Card.Body>
          {itemobj.ms}
        </Card.Body>

        <Card.Footer>
          <Space>
            <span style={{ position: 'relative', top: '8px' }}
              onClick={() => {
                //切换收藏状态
                obj.dispatch({
                  type: 'change_collec',
                  payload: itemobj.id
                })
              }}>
              <Star color={itemobj.collec ? 'red' : ''} />
            </span>
            <Button
              round
              type={itemobj.sub ? 'warning' : 'default'}
              size='small'
              onClick={() => {
                //切换订阅
                obj.dispatch({
                  type: 'change_sub',
                  payload: itemobj.id
                })
              }}
            >
              {itemobj.sub ? '已经订阅' : '免费订阅'}
            </Button>
          </Space>
        </Card.Footer>
      </Card>
    </div>
  )
}
